<template>

  <el-container class="index">
    <!-- 头部 -->
  <el-header>
    <div>
      <el-button type="danger"  class="close" @click="loginfrom">退出</el-button>
        <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
        <span class="title">
          <i class="el-icon-s-tools"></i>
          双碳管理系统</span>
    </div>

</el-header>
  <el-container>

    <!-- 左侧 -->
    <el-aside width="toggle1 ? '64px':'200px'">
        <div class="toggle" @click="toggle1">|||</div>
        <el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409EFF"
      :unique-opened="this.upique"
      :collapse="toggle"
      :collapse-transition="false"
      router
      >
      <el-submenu :index="item.id + ''" v-for="item in Menu" :key="item.id">
        <template slot="title">
          <i :class="iconList[item.id]"></i>
          <span>{{ item.authName }}</span>
        </template>

          <el-menu-item :index="'/'+item1.path" v-for="item1 in item.children" :key="item1.id">
            <i class="el-icon-menu"></i>
          <span>{{ item1.Name }}</span>
          </el-menu-item>
      </el-submenu>
    </el-menu>

    </el-aside>
    <!-- 中间主体 -->
    <el-main>
<router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
import axios from 'axios'

export default {
  name: 'IndexTest',
  data () {
    return {
      Menu: [],
      toggle: false,
      index: '',
      iconList:
        {
          101: 'iconfont el-icon-user',
          111: 'iconfont el-icon-s-data',
          121: 'iconfont el-icon-edit-outline'
        },
      upique: true
    }
  },
  created () {
    this.getmenu()
  },
  methods: {
    loginfrom () {
      this.$message.warning('即将返回登录界面!')
      setTimeout(() => {
        this.$router.push('/login')
      }, 3000)
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      this.index = this.index.fifter(index => index.row)
    },
    toggle1 () {
      this.toggle = !this.toggle
    },
    async  getmenu () {
      const res = await axios.get('/menu')
      this.Menu = res.data
    }

  },
  computed: {

  }
}

</script>
<style lang="less" scoped>
.iconfont{
  margin-right:10px;

}
.el-header{
background-color: #373d41;
display: flex;
justify-content: space-around;
align-items: center;
color: #fff;
font-size: 20px;
div{
    display: flex;
    align-items: center;
    span{
        margin-left: 15px;
        position: relative;
right: 350px;
    }

}
img{
    border-radius: 50%;
    width: 55px;
    height: 55px;
    position: relative;
right: -880px;
}
}
.el-aside{
    background-color:#333744 ;
}
.el-main{
    background-color: #EAEDF1;
}

.index{

    height: 100%;
}
.el-button{
    position: relative;
    left: 350px;
    border-radius: 12px;

}
.toggle{
    background-color: #4a5064;
    font-size: 10px;
    line-height: 26px;
    color:#fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
.title{
position: absolute;
transform: translate(-250%);
font-size: larger;
font-family: 宋体;
}
.close{
  position: relative;
  left: 870px;
}
</style>
